<template>
  <a-form
    ref="formRef"
    :model="data"
    :rules="formRules"
    inline
    class="matching-rule">
    <a-form-item hide-label field="action">
      <a-select
        v-model="data.action"
        placeholder="请选择标头类型"
        class="!w-[168px]">
        <a-option label="添加标头" :value="1"></a-option>
        <a-option label="移除标头" :value="2"></a-option>
      </a-select>
    </a-form-item>

    <section class="flex flex-1 gap-x-4" v-if="data.action">
      <a-form-item hide-label field="key" class="!w-[148px]">
        <a-input v-model="data.key" placeholder="请输入名称"></a-input>
      </a-form-item>

      <a-form-item
        hide-label
        field="value"
        class="flex-1"
        v-if="data.action !== 2">
        <a-input
          v-model="data.value"
          class="value"
          placeholder="请输入值"></a-input>
      </a-form-item>
    </section>
    <div v-else class="flex-1 h-8 flex items-center text-sm/22px text-6">
      请先选择标头类型
    </div>

    <div class="flex !w-15">
      <a-button
        type="text"
        status="danger"
        :disabled="disableDelete"
        @click="emit('delete')">
        删除
      </a-button>
    </div>
  </a-form>
</template>

<script setup lang="ts">
import type { FormInstance, FieldRule } from '@arco-design/web-vue'

import type { HeaderRule } from './types.ts'

interface IEmit {
  (event: 'update:header', value: HeaderRule): void
  (event: 'add'): void
  (event: 'delete'): void
}

interface IProps {
  header: HeaderRule
  disableDelete?: boolean
}

const emit = defineEmits<IEmit>()
const props = defineProps<IProps>()

const formRef = ref<FormInstance>()

const data = useVModel(props, 'header', emit as any)
const formRules = computed<{ [key: string]: FieldRule[] }>(() => {
  const keyRules: FieldRule[] = [
    { required: true, message: '请输入名称' },
    { max: 128, message: '标头长度不能超过128位' },
    {
      validator(value, callback) {
        const reg =
          /^([a-zA-Z]+|[a-zA-Z]{2}|[a-zA-Z]([a-zA-Z0-9\-_]+)[a-zA-Z])$/
        callback(regExpValidateHandler(value, reg, '标头格式错误'))
      }
    }
  ]
  const valueRules: FieldRule[] = []

  if (data.value.action !== 2) {
    valueRules.push({ required: true, message: '请输入值' })
    if (data.value.key.toLowerCase() === 'user-agent') {
      valueRules.push({ max: 255, message: 'User-Agent输入上限为255个字符' })
    } else {
      valueRules.push({ max: 2048, message: '输入上限为2048个字符' })
    }
  }

  return {
    action: [{ required: true, message: '请选择操作' }],
    key: keyRules,
    value: valueRules
  }
})

watch(
  () => data.value.action,
  (val) => {
    if (val === 2) {
      data.value.value = ''
    }
    nextTick(() => {
      formRef.value?.clearValidate(['key', 'value'])
    })
  }
)

async function validate() {
  return await formRef.value?.validate()
}

defineExpose({ validate })
</script>

<style scoped lang="less">
.http-header {
  @apply !flex flex-row gap-x-4;
  .arco-form-item {
    @apply w-fit;
    margin: 0;
  }
  .value {
    @apply relative;
    // &::before {
    //   @apply w-[10px] h-[1px] bg-[#DBDDE2] absolute left-[-8px] top-[50%];
    //   content: '';
    // }
  }
  .a-button {
    &:focus {
      color: #606266;
      border-color: #dcdfe6;
      background: #fff;
    }
  }
}
</style>
